<template>
  <div class="home-container">
    <shopHeader></shopHeader>
    <div class="main-body">
      <div class="main-container">
        <div class="login-box">
          <i
            class="iconfont qrcode icon-qrcode"
            v-if="type"
            @click="type = false"
          ></i>
          <i
            class="iconfont qrcode icon-diannao"
            v-if="!type"
            @click="type = true"
          ></i>
        </div>
        <div class="login-box-wrap" v-if="type">
          <div class="login-tip">
            <div class="tip-content">扫码登录更安全</div>
          </div>
          <ul class="tab-box">
            <li
              class="tab-item"
              :class="isActive ? 'tab-this' : ''"
              @click="isActive = true"
            >
              密码登录
            </li>
            <li
              class="tab-item"
              :class="!isActive ? 'tab-this' : ''"
              @click="isActive = false"
            >
              短信登录
            </li>
          </ul>
          <el-form ref="LoginFormref" :model="LoginForm" label-width="80px">
            <el-input
              v-model="LoginForm.username"
              placeholder="账号名/邮箱/手机号"
              class="form-item"
              v-if="isActive"
            >
              <template slot="prepend">
                <i class="iconfont">&#xe788;</i>
              </template>
            </el-input>
            <el-input
              v-model="LoginForm.password"
              placeholder="请输入登录密码"
              type="password"
              class="form-item"
              v-if="isActive"
            >
              <template slot="prepend">
                <i class="iconfont">&#xe620;</i>
              </template>
            </el-input>

            <el-input
              v-model="LoginForm.phone"
              placeholder="请输入手机号"
              class="form-item"
              v-if="!isActive"
            >
              <template slot="prepend">
                <i class="iconfont">&#xe788;</i>
              </template>
            </el-input>
            <el-input
              v-model="LoginForm.code"
              placeholder="请输入验证码"
              type="password"
              class="form-item"
              v-if="!isActive"
            >
              <template slot="prepend">
                <i class="iconfont">&#xe620;</i>
              </template>
              <span slot="append">获取验证码</span>
            </el-input>
            <el-button @click="onSubmit('LoginFormref')" class="submit-btn">登录</el-button>
            <div class="login-link">
              <a href="#">
                <i class="iconfont">&#xe647;</i>
                微博登录
              </a>
              <a href="#">
                <i class="iconfont alipay">&#xe613;</i>
                支付宝登录
              </a>
            </div>
            <div class="login-link login-links">
              <a href="#" v-if="isActive"> 忘记密码 </a>
              <a href="#" v-if="isActive"> 忘记账号名 </a>
              <a href="javascript:;" @click="toRegister">免费注册</a>
            </div>
          </el-form>
        </div>
        <div class="login-box-wrap" v-if="!type">
          <div class="login-title">手机扫码，安全登录</div>
          <div class="login-QRcode-body">
            <div class="img-container">
              <img
                src="https://api.qrserver.com/v1/create-qr-code?data=http://goqr.me/api/"
                alt=""
              />
            </div>
          </div>
          <div class="bottom">
            <div class="footer-top">
              <i class="iconfont">&#xe8b5;</i>
              <p class="method">
                <span>打开</span>
                <a
                  href="https://www.taobao.com/m"
                  target="_blank"
                  class="light-link"
                  >淘宝App</a
                >
                |
                <a
                  href="https://www.tmall.com/wow/portal/act/app-download?mmstat=pc_login"
                  target="_blank"
                  class="light-link"
                  >天猫App</a
                >
                <br />
                <span>扫一扫登录</span>
              </p>
            </div>
            <div class="footer-bottom">
              <span @click="type = true">密码登录</span>
              <a
                href="http://reg.taobao.com/member/newbie.htm?spm=a2107.1.0.0.6de511d9SPEHDK&amp;from=login"
                target="_blank"
                class="register-a-link"
                data-spm-anchor-id="a2107.1.0.0"
                >免费注册</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <mainFooter></mainFooter>
  </div>
</template>
<script>
import shopHeader from '@/components/header.vue'
import mainFooter from '@/components/footer.vue'
export default {
  components: {
    shopHeader,
    mainFooter
  },
  data () {
    return {
      isActive: true,
      LoginForm: {
        username: '',
        password: '',
        phone: '',
        code: ''
      },
      type: true,
      isLogin: true
    }
  },
  created () {},
  computed: {},
  methods: {
    async onSubmit (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 解构赋值 await async化简promise
          const {
            data: res
          } = await this.$http.post('/user/shoplogin', this.LoginForm)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('登录成功！')
          localStorage.setItem('Authorization', res.data.token)
          setTimeout(() => {
            this.$router.push('/index')
          }, 3000)
        }
      })
    },
    toRegister () {
      this.$router.push('/shopregister')
    }
  }
}
</script>
<style lang="less" scoped>
// .header {
//   height: 88px;
//   padding: 22px 0;
//   .header-container {
//     width: 1200px;
//     margin: 0 auto;
//     display: flex;
//     justify-content: space-between;
//     .header-right {
//       color: #666;
//       font-size: 12px;
//       line-height: 20px;
//       a:hover {
//         color: #f40;
//       }
//       a {
//         display: block;
//       }
//       .iconfont {
//         color: #f40;
//       }
//     }
//   }
//   .logo {
//     height: 45px;
//   }
// }
.main-body {
  height: 600px;
  overflow: hidden;
  background: url("../../assets/images/loginbg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  .main-container {
    width: 1200px;
    margin: 0 auot;
    height: 100%;
    position: relative;
    .login-box {
      width: 350px;
      position: absolute;
      top: 120px;
      right: 60px;
      overflow: hidden;
      // height: 400px;
      .qrcode {
        color: #f40;
        font-size: 52px;
        padding: 2px;
        line-height: 52px;
        background: hsla(0, 0%, 100%, 0.9);
        float: right;
        cursor: pointer;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
      }
    }

    .login-box-wrap {
      background: hsla(0, 0%, 100%, 0.9);
      width: 350px;
      position: absolute;
      top: 120px;
      right: 60px;
      overflow: hidden;
      padding: 25px;
      clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 0 100%);
      // height: 400px;
      .login-title {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        color: #3c3c3c;
        font-weight: 700;
      }
      .login-QRcode-body {
        margin-top: 16px;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
        .img-container {
          width: 144px;
          height: 144px;
          padding: 5px;
          background: #fff;
          box-shadow: 0px 0px 10px 2px #ccc;
        }
      }
      .bottom {
        .footer-top {
          display: flex;
          justify-content: center;
          .iconfont {
            font-size: 38px;
            color: #f40;
            margin-right: 10px;
          }
          .method {
            color: #6c6c6c;
            font-size: 12px;
            line-height: 18px;
          }
        }
        .footer-bottom {
          margin: 8px 0;
          font-size: 12px;
          color: #6c6c6c;
          float: right;
          span {
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
      .login-tip {
        border: 1px solid #f3d995;
        background: #fefcee;
        padding: 5px 10px;
        line-height: 16px;
        position: absolute;
        width: fit-content;
        right: 55px;
        top: 5px;
        &::after {
          content: "";
          position: absolute;
          height: 0px;
          width: 0px;
          border: 8px solid #000;
          border-left-color: #fefcee;
          border-top-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          top: 5px;
          right: -15px;
        }

        .tip-content {
          color: #ff9000;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .tab-box {
        display: flex;
        margin-bottom: 20px;
        margin-top: 4px;
        .tab-item {
          height: 18px;
          line-height: 5px;
          font-size: 16px;
          color: #3c3c3c;
          margin: 9px 10px 0 0;
          font-weight: 700;
          cursor: pointer;
        }
        .tab-this {
          border-bottom: 2px solid #3c3c3c;
        }
      }
      .form-item {
        margin-bottom: 20px;
        font-size: 14px;
      }
      .submit-btn {
        width: 100%;
        background: #f40;
        color: #fff;
        font-size: 16px;
      }
      .login-link {
        margin-top: 15px;
        display: flex;
        height: 24px;
        line-height: 24px;
        i {
          color: #f40;
          font-size: 16px;
          margin-right: 3px;
        }
        .alipay {
          color: #1ba9ee;
        }
        a {
          color: #6c6c6c;
          font-size: 12px;
          display: flex;
          margin-right: 5px;
        }
      }
      .login-links {
        justify-content: flex-end;
      }
    }
  }

}
.footer {
  position: relative;
  margin: 60px auto 0;
  padding: 7px 0 9px;
  border-top: 1px solid #ddd;
  width: 1200px;
  .footer-hd {
    display: flex;
    margin-bottom: 8px;
    line-height: 27px;
    color: #6c6c6c;
    border-bottom: 1px solid #ddd;
    li {
      display: inline;
      margin: 0 4px;
      white-space: nowrap;
      color: #6c6c6c;
      padding-bottom: 8px;
      cursor: pointer;
      &:hover {
        color: #f40;
      }
    }
    b {
      margin: 0 5px;
      color: #eee;
    }
  }
  .footer-bd {
    font-size: 12px;
    p {
      padding-bottom: 8px;
    }
    a {
      margin: 0 4px;
      color: #9c9c9c;
      &:hover {
        color: #f40;
      }
    }
    b {
      display: inline;
      margin: 0 4px;
      font-weight: 400;
      color: #ddd;
    }
    span{
      display: inline;
white-space: nowrap;
color: #9c9c9c;
    }
  }
}
</style>
<style lang="less">
.el-input-group__append,
.el-input-group__prepend,
.el-input__inner {
  border: none;
}
.el-input-group__append {
  background: #fff;
  font-size: 12px;
  color: #6c6c6c;
  cursor: pointer;
}
.el-input-group__prepend {
  background: #ccc;
  color: #fff;
}
</style>
